<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
            padding-left: 30px;
        }
    </style>
</head>
<body>
    <div id="app">
        <ul>
            <li>
                vue2中为一个仓库数据对象新增属性时，该属性不会被劫持，也无法完成响应式构建<br>
                vue2提供一个实例方法 $set，可以手动完成新变量的数据劫持
            </li>
            <li>
                vue2中对数组的下标操作和数组的length操作是不具有响应式功能(因为数组数据变化频繁，vue不对数组做递归劫持) <br>
                vue2建议规避下标和length属性的操作 <br>
                vue2为了保证vue的响应功能的完整性，对数组作为如下调整 <br>
                1.页面v-model会对绑定的下标操作数组完成对应的变量再次劫持 <br>
                2.vue2重写了JS数组会修改原数据的所有原型方法，并在原有功能基础上增加响应式方法回调【变更方法|变异方法】
            </li>
        </ul>
        <p>user:{{ user }}</p>
        <input type="button" value="add-user-age" @click="addUserAge()">
        <hr>
        <p>arr:{{ arr }}</p>
        <input type="button" value="set-empty-arr" @click="setArrToEmpty()"><br>
        <input type="button" value="修改数组第一个元素的值" @click="setArrFirst()"><br>
        <input type="text" v-model="arr[1]"> <br>
        <input type="button" value="addArrItem" @click="addArrItem()">

    </div>
    <script type="module">

        let pushFun = Array.prototype.push
        // 加载 Vue3 的ESM 模块文件
        import Vue from "../assets/vue2/vue.esm.browser.js"
        new Vue({
            el:"#app",
            data(){
                return {
                    user:{
                        name:"tom"
                    },
                    arr:[1,2,3,4,5,6]
                }
            },
            methods: {
                addUserAge() {
                    // this.user.age = 13;

                    // this.$set(targetObj,propName,propValue)
                    //      targetObj 新增加属性的目标对象
                    //      propName 新增属性名
                    //      propValue 新增属性的值
                    this.$set(this.user,"age",13)

                    console.log(this);
                },
                setArrToEmpty(){
                    // this.arr = []
                    this.arr.length = 0;
                },
                setArrFirst(){
                    this.arr[0] = Math.random();
                },
                addArrItem(){
                    this.arr.push( Math.random() )
                    console.log(this.arr.push === pushFun);
                }
            },
        })
    </script>
</body>
</html>